import { useSignal } from "@preact/signals";
import Counter from "../islands/Counter.tsx";

export default function Home() {
    const count = useSignal(3);
    return (
        <>
            <div class="px-4 py-8 mx-auto bg-[#86efac]">
                <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
                    <img
                        class="my-6"
                        src="/logo.svg"
                        width="128"
                        height="128"
                        alt="the Fresh logo: a sliced lemon dripping with juice"
                    />
                    <h1 class="text-4xl font-bold">Welcome to Fresh</h1>
                    <p class="my-4">
                        Try updating this message in the
                        <code class="mx-2">./routes/index.tsx</code>
                        file, and refresh.
                    </p>
                    <Counter count={count} />
                </div>
            </div>
            <img src="./hero.webp" style="width: 100%" />
        </>
    );
}
